<template>
  <div class="tab-container">
   		<el-row>
			  <el-col :span="24">
			    <el-button-group>
			      <el-button type="primary" v-if="orgManager_btn_add && orgManager_btn_add_show" icon="plus" @click="handlerAdd">添加机构</el-button>
			      <el-button type="primary" v-if="orgManager_btn_edit && orgManager_btn_edit_show" icon="edit" @click="handlerEdit">编辑</el-button>
			      <el-button type="primary" v-if="orgManager_btn_del && orgManager_btn_del_show" icon="delete"  @click="handleDelete">
			      	 删除
			      </el-button>
			      <el-button type="primary" v-if="orgManager_btn_userManager && orgManager_btn_userManager_show" @click="handlerUser">
			        <icon-svg icon-class="27"></icon-svg>关联用户
			      </el-button>

			    </el-button-group>
			  </el-col>
			  <el-col :span="8" style='margin-top:15px;'>
			    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
			    <el-tree class="filter-tree" :data="treeData" node-key="id" highlight-current :props="defaultProps" :filter-node-method="filterNode" ref="groupTree" @node-click="getNodeData" default-expand-all :expand-on-click-node="false"> </el-tree>
			  </el-col>
			  <el-col :span="16" style='margin-top:15px;'>
			    <el-form :label-position="labelPosition" label-width="80px" :model="form" ref="form">
			      <el-form-item label="机构名称">
			        <el-input v-model="form.name" :disabled="formEdit"></el-input>
			      </el-form-item>
			      <el-form-item label="编码">
			        <el-input v-model="form.code" :disabled="formEdit"></el-input>
			      </el-form-item>
			      <el-form-item label="描述">
			        <el-input v-model="form.description" :disabled="formEdit"></el-input>
			      </el-form-item>
			      <el-form-item v-if="formStatus == 'update'">
			        <el-button type="primary" v-if="orgManager_btn_edit" @click="update">更新</el-button>
			        <el-button @click="onCancel">取消</el-button>
			      </el-form-item>
			      <el-form-item v-if="formStatus == 'create'">
			        <el-button type="primary" v-if="orgManager_btn_add" @click="create">保存</el-button>
			        <el-button @click="onCancel">取消</el-button>
			      </el-form-item>
			    </el-form>
			  </el-col>
			</el-row>
      <el-dialog style="top: -14%;" :modal-append-to-body="false"   :title="dialogDetailName" :visible.sync="dialogUserVisible" custom-class="el-dialog el-dialog--large dialog-custom" >
        <user-select  :orgId="orgId"  @closeDetailDialog="closeUserDialog" ref="usersInOrg"></user-select >
      </el-dialog>
  </div>
</template>

<script>
import {
  fetchTree,
  getObj,
  addObj,
  delObj,
  putObj
} from 'api/admin/org/index';
import userSelect from './components/orgSelectUser';
import { mapGetters } from 'vuex';
export default {
  name: 'orgIndex',
  components: {
  	'user-select':userSelect
  },
  props: {
    type: {
      default: '1'
    }
  },
  data() {
    return {
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      dialogUserVisible: false,
      dialogShowUserVisible:false,
      dialogUserName: '关联用户',
      dialogAuthorityVisible: false,
      dialogDetailName:'选择关联用户',
      dialogOrgDetailName:'机构用户',
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      orgManager_btn_edit: false,
      orgManager_btn_del: false,
      orgManager_btn_add: false,
      orgManager_btn_userManager: false,
      orgManager_btn_edit_show:false,//默认不显示 ，点击树节点显示
      orgManager_btn_del_show:false,//默认不显示 ，点击树节点显示
      orgManager_btn_add_show:false,//控制添加按鈕，在level——3的层级上不显示
      orgManager_btn_userManager_show:false,//默认不显示 ，点击树节点显示
      form: {
        code: undefined,
        name: undefined,
        description: undefined,
      },
      currentId: -1,
      currentLevel: 0,
      orgId : undefined
    }
  },
  watch: {
    filterText(val) {
      this.$refs.groupTree.filter(val);
    },
    orgId(val){
    }
  },
  created() {
  	//初始化列表
    this.getList();
    this.orgManager_btn_edit = this.elements['orgManager:btn_edit'];
    this.orgManager_btn_del = this.elements['orgManager:btn_del'];
    this.orgManager_btn_add = this.elements['orgManager:btn_add'];
    this.orgManager_btn_userManager = this.elements['orgManager:btn_userManager'];
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      fetchTree(this.listQuery).then(data => {
        this.treeData = data.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update';
      }
      //获取叶子节点上 机构详细信息
      getObj(data.id).then(response => {
        this.form = response.data;
      });
      this.currentId = data.id;
      this.currentLevel=data.level;
      if(this.currentLevel>=2){
        this.orgManager_btn_add_show=false;
      }else{
        this.orgManager_btn_add_show=true;
      }
      this.orgId = data.id;
      this.orgManager_btn_edit_show = true;
      this.orgManager_btn_del_show = true;
      this.orgManager_btn_userManager_show = true;
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    //删除机构
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList();
          this.resetForm();
          this.onCancel();
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        });
      });
    },
    //修改机构
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList();
        this.onCancel();
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        });
      });
    },
    create() {
      this.form.level=Number(this.currentLevel)+1;
      addObj(this.form).then(() => {
        this.getList();
        this.onCancel();
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        });
      });
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = '';
    },
    resetForm() {
      this.form = {
        parentId: this.currentId,
        code: undefined,
        name: undefined,
        description: undefined,
        roleType: this.type
      };
    },
     handlerUser() {
       this.dialogUserVisible = true;

       if (this.$refs.usersInOrg !== undefined) {

         this.$refs.usersInOrg.handleInit();
       }
    },
    showOrgUser() {
      this.dialogShowUserVisible = true;
    },
    closeUserDialog() {
    	this.dialogShowUserVisible = false;
      this.dialogUserVisible = false;
    }
  }
}
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
<style>
.dialog-custom {
  min-height:690px;
}
</style>
